<template>
  <a-spin :spinning="true">
    <ant-modal
      modalWidth="576"
      modalHeight="500"
      :visible="open"
      :modal-title="formTitle"
      :adjust-size="true"
      @cancel="cancel"
    >
      <a-form-model ref="form" :model="form" :rules="rules" slot="content" layout="vertical" >
        <a-row :gutter="32">
          <a-col :span="24">
            <a-form-model-item label="步骤名称" prop="stepName">
              <a-input v-model="form.stepName" placeholder="请输入步骤名称"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="排序" prop="stepSort">
              <a-input-number v-model="form.stepSort" :min="0" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item prop="stepType">
              <span slot="label">
                步骤类型
                <a-popover title="步骤类型">
                  <template #content>
                    <p>[人工值守] 该节点需要工作人员终端主动扫码后结束</p>
                    <p>[主动扫码] 该节点由用户主动扫描节点码后结束</p>
                    <p>[主动完成] 该节点由用户主动点击下一步后结束</p>
                  </template>
                  <a-icon type="question-circle" />
                </a-popover>
              </span>
              <a-select
                placeholder="请选择步骤类型"
                v-model="form.stepType"
                :getPopupContainer="
                  triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                "
                style="width: 100%"
                allow-clear>
                <a-select-option v-for="(d, index) in stepTypeOptions" :key="index" :value="d.dictValue">{{ d.dictLabel }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" v-show="form.stepType!='3'">
            <a-form-model-item label="步骤码" prop="qrCode">
              <img width="150px" :src="'https://api.pwmqr.com/qrcode/create/?url='+constructQRObj(form.templateId,form.id,form.stepName)">
            </a-form-model-item>
          </a-col>
          <a-col :span="form.stepType=='2'?12:24" >
            <a-form-model-item label="备注" prop="remark">
              <a-textarea v-model="form.remark" placeholder="请输入${comment}" :rows="4"/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="32">
          <a-col :span="24">
            <a-form-model-item label="步骤描述" prop="stepDescription">
              <a-textarea v-model="form.stepDescription" placeholder="请输入步骤描述" :rows="4"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
      <template slot="footer">
        <a-button :disabled="disabled" @click="cancel">
          取消
        </a-button>
        <a-button type="primary" :disabled="disabled" @click="submitForm(true)">
          保存
        </a-button>
      </template>
    </ant-modal>
  </a-spin>
</template>
<script>
import ModGuideTemplateStepEditForm from './ModGuideTemplateStepForm'
export default {
  ...ModGuideTemplateStepEditForm
}
</script>
